/* =====================
   Reset & Base
===================== */
html, body {margin: 0; padding: 0;}
html { scroll-behavior: smooth;}
:root{ --brand:#ff6a00; --bg:#ffffff; --text:#111111; --muted:#666666; --card:#ffffff; --line:#9f9f9f;
  --shadow: 0 6px 32px rgba(0,0,0,.06); --radius:18px; --max:1120px;}
*{ box-sizing:border-box; }
body {font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
    color: var(--text); background: #ffffff; line-height: 1.55;}
a{ text-decoration:none; color:inherit; }

/*header*/
.header {position: fixed; width:100%; z-index:9999; background:#ffffff; border-bottom:1px solid #ddd;}
.header.is-solid {background:#ffffff;}
.header hr{margin:0; border:0; border-top:1px solid #ddd;}
.header-inner{max-width:1100px; margin:0 auto; height:70px; padding:0 12px; display:flex; align-items:center;}
.header-logo img{ height:50px; display:block;}
.nav{ display:flex; gap:18px; margin-left:auto; align-items: center;}
.nav-item {position: relative;}
.nav-item > a {cursor: pointer; user-select: none;}
.nav-item > a:active {transform: translateY(0);}
.nav-item:hover .dropdown{display: block;}
.dropdown{position: absolute; top: 100%; left:0%; transform: none; min-width: 180px;
          background: #fff; border: 1px solid #ddd; border-radius: 12px;
          padding: 10px; display: none; z-index: 99999;}
.dropdown a{display: block; padding: 10px 10px; border-radius: 10px; font-size: 14px; color:#111; cursor: pointer;}
.dropdown a:hover{background: rgba(255,106,0,.10); color : var(--brand);}
.nav a{ font-size:16px; font-weight:500; font-family:'Montserrat', sans-serif; color:#111;
        transition: color .3s ease, transform .3s ease;}
.nav a:hover{ color: var(--brand); transform: translateY(-2px); }

main{padding-top:70px;}

/*Layout*/
.container{max-width:var(--max); margin:0 auto; padding:0 20px;}

/*Hero*/
.hero{padding:80px 0 30px; background: radial-gradient(900px 400px at 20% 0%, rgba(255,106,0,.10), transparent 60%);}
.hero-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:28px; align-items:center;}
.badge{ display:inline-block; padding:0px 12px; color: var(--brand);
        font-weight:700; font-size:30px; margin-bottom:14px;}
.hero-title{font-size:35px; line-height:1.15; margin-bottom:14px;}
.accent{color: var(--brand);}
.hero-desc{font-size:16px; color: var(--muted); margin-bottom:20px;}
.hero-actions{display:flex; gap:10px; margin-bottom:24px;}

.btn{padding:10px 16px; border-radius:14px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
.btn-primary{background: var(--brand); color:#fff;}
.btn-primary:hover {transform: translateY(-3px);}
.btn-ghost{border:1px solid var(--line); color:#333;}
.btn-ghost:hover {transform: translateY(-3px);}

.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.stat{padding:14px; background:#ffffff; border:1px solid var(--line); border-radius:var(--radius);}
.stat-num{font-weight:800; font-size:14px;}
.stat-label{font-size:12px; color: var(--muted); margin-top:4px;}

/*Hero Visual*/
.hero-visual{ padding:18px; border-radius:22px; background:#ffffff; border:1px solid var(--line); box-shadow: var(--shadow);}
.diagram{ display:flex; flex-direction:column; gap:12px;}
.diagram-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.chip{padding:12px; border-radius:14px; border:1px solid var(--line); font-weight:700; background:#fafafa;}

.stack{margin-top:8px; padding:14px; border-radius:16px; border:1px solid rgba(255,106,0,.4); background: rgba(255,106,0,.06);}
.stack-top{font-weight:800;}
.stack-bottom{font-size:13px; color: var(--muted); margin-top:6px;}

/*Sections*/
.section{padding:70px 0;}
.section-muted{background:#fafafa;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px;}
.section-head h2{font-size:26px;}
.section-head p{max-width:640px; color: var(--muted);}

/*Cards*/
.cards{display:grid; gap:16px;}
.cards.two{grid-template-columns:1fr 1fr;}
.card{padding:20px; border-radius:var(--radius); background:#ffffff; border:1px solid var(--line); box-shadow: var(--shadow);}
.card-accent{border-color: rgba(255,106,0,.5);}

.list{padding-left:18px; color: var(--muted);}
.list li{margin:6px 0;}

/*Feature / Benefit*/
.feature-grid,
.benefit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.feature{padding: 20px 18px 18px; border-radius: var(--radius); background:#ffffff; border: 1px solid var(--line); box-shadow:var(--shadow);}
.benefit{padding: 2px 18px 18px; border-radius:var(--radius); background:#ffffff; border:1px solid var(--line); box-shadow: var(--shadow);}
.benefit-title {display:flex; align-items: center; gap: 6px; margin-bottom: 6px; margin-left: -25px;}
.feature h3{margin:10px 0 6px;}
.benefit h3 {margin: 0; margin-left: -20px;}
.benefit-icon {width: 80px; height: 80px; flex-shrink: 0;}
.benefit-icon img {width: 100%; height: 100%; object-fit: contain;}
.benefit p{margin-top: -20px; color: var(--muted); font-size:14px;}
.feature p{margin-top: 6px; color: var(--muted); font-size: 14px;}

.icon{width:44px; height:44px; border-radius:12px; background: rgba(255,106,0,.15); color: var(--brand); display:flex;
  align-items:center; justify-content:center; font-weight:800;}

/*Footer*/
.footer{background:#f5f5f5; color:#333; padding:48px 0; font-size:14px;}
.footer-inner{max-width:1100px; margin:0 auto; padding:0 16px; display:flex; justify-content:space-between; align-items:center;}
.footer-logo img{height:60px;}

/* Home Button*/
.home-btn{position:fixed; top:14px; right:20px; padding:6px 14px; font-size:10px; font-weight:700;
  color:#fff; background:#333; border-radius:200px; z-index:100000;}


  /*page enter*/
  /* 기본: 살짝 아래 + 투명 */
.page-enter .hero .hero-copy,
.page-enter .hero .hero-visual,
.page-enter #overview .card,
.page-enter #features .feature,
.page-enter #benefits .benefit {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .7s ease forwards;
}

/* 순서대로 딜레이 주기 */
.page-enter .hero .hero-copy { animation-delay: .10s; }
.page-enter .hero .hero-visual { animation-delay: .25s; }

.page-enter #overview .card:nth-child(1) { animation-delay: .35s; }
.page-enter #overview .card:nth-child(2) { animation-delay: .45s; }

.page-enter #features .feature:nth-child(1) { animation-delay: .20s; }
.page-enter #features .feature:nth-child(2) { animation-delay: .26s; }
.page-enter #features .feature:nth-child(3) { animation-delay: .32s; }
.page-enter #features .feature:nth-child(4) { animation-delay: .38s; }
.page-enter #features .feature:nth-child(5) { animation-delay: .44s; }
.page-enter #features .feature:nth-child(6) { animation-delay: .50s; }
.page-enter #features .feature:nth-child(7) { animation-delay: .56s; }

.page-enter #benefits .benefit:nth-child(1) { animation-delay: .20s; }
.page-enter #benefits .benefit:nth-child(2) { animation-delay: .28s; }
.page-enter #benefits .benefit:nth-child(3) { animation-delay: .36s; }
.page-enter #benefits .benefit:nth-child(4) { animation-delay: .44s; }
.page-enter #benefits .benefit:nth-child(5) { animation-delay: .52s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}